<template>
  <div class="contain">
    <div class="top">
      <div class="car">
        <a href="#"><img src="icon_arrow_left_black.png" alt="" /></a>
        <b>购物车</b>
      </div>
      <div class="pic"><img src="no_result_cart3.png" alt="" /></div>
      <p>登录后才能看到商品哦~</p>
      <div class="deng"><a href="#">立即登录</a></div>
    </div>
    <div class="bottom">
      <div class="head">
        <img src="recheader_left.png" alt="" />
        <b>为你推荐</b>
        <img src="recheader_right.png" alt="" />
      </div>
      <div class="foot">
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="2751088f_7864_4cfd_87c9_0acccdedd906.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="17c897f7_6876_4776_b2bf_be2bc20f5c62.png" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="7f281da4_d1fa_48cd_9019_d1c21c67d475.png" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
        <div class="box">
          <img src="dcccb4c8_a2ff_4dd1_bef3_d316fe5eb763.jpeg" alt="">
          <h3>冥想沉浸伴侣</h3>
          <p>Zmind冥想沉浸伴侣</p>
          <span>￥<i>699</i>起</span>
          <b>hot</b>
          <em>有品众筹</em>
        </div>
      </div>
    </div>
    <Bb />
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.contain {
  width: 4.14rem;
  height: 8.96rem;
  background-color: #f4f4f4;
  overflow-y: auto;
}
.top {
  width: 4.14rem;
  height: 3.35rem;
}
.top .car {
  width: 4.14rem;
  height: 0.48rem;
}
.top .car img {
  width: 0.47rem;
  height: 0.47rem;
  float: left;
}
.top .car b {
  font-weight: normal;
  font-size: 0.18rem;
  transform: translateX(1.3rem);
  line-height: 0.48rem;
  float: left;
}
.top .pic {
  width: 1rem;
  height: 1rem;
  margin: 0.5rem auto 0.1rem;
}
.top img {
  width: 100%;
  height: 100%;
}
.top p {
  text-align: center;
  font-size: 0.12rem;
  line-height: 0.35rem;
}
.top .deng {
  width: 0.9rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  background-color: #fff;
  border: 1px solid #666;
  margin: auto;
}
.top .deng a {
  display: inline-block;
  font-size: 0.12rem;
  line-height: 0.4rem;
  text-align: center;
  transform: translateY(-0.8rem) translateX(0.2rem);
}
.bottom {
  width: 4.14rem;
}
.bottom .head {
  width: 4.14rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
}
.bottom .head img {
  width: 0.2rem;
  height: 0.2rem;
  margin: 0 0.1rem;
}
.bottom .head b {
  display: inline-block;
  font-size: 0.16rem;
}
.bottom .foot{
  width: 4.14rem;
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.bottom .foot .box{
  width: 1.89rem;
  height: 3.08rem;
  background-color: #fff;
  border-radius: 0.1rem;
  margin-bottom: 0.15rem;
}
.bottom .foot .box img{
  width: 1.89rem;
  height: 1.89rem;
  border-radius: 0.1rem 0.1rem 0 0 ;
}
.bottom .foot .box h3{
  font-size: 0.16rem;
  line-height: 0.1rem;
  transform: translateX(0.07rem);
}
.bottom .foot .box p{
  font-size: 0.14rem;
   transform: translateX(0.07rem);
   line-height: 0.3rem;
}
.bottom .foot .box span{
  display: block;
  font-size: 0.08rem;
  color: #f82400;
   transform: translateX(0.07rem);
}
.bottom .foot .box span i{
  font-size: 0.16rem;
  color: #f82400;
  font-style: normal;
}
.bottom .foot .box b{
  width:0.29rem ;
  height:0.15rem ;
  font-size: 0.1rem;
  line-height: 0.15rem;
  text-align: center;
  display:inline-block;
  background-color: #fea600;
  color:#f82400;
   transform: translateX(0.07rem) translateY(-0.9rem);
}
.bottom .foot .box em{
   display: inline-block;
   font-style: normal;
  width:0.48rem ;
  height:0.15rem ;
  font-size: 0.1rem;
  line-height: 0.15rem;
  text-align: center;
  background-color: #31291a;
  color: #8f7b5f;
  transform: translateX(0.13rem) translateY(-0.9rem);
}
::-webkit-scrollbar {
  display: none;
}
</style>